<template>
  <div class="page-login">

    <div class="page-login--layer page-login--layer-time" flex="main:center cross:center">
      {{time}}
    </div>

    <div class="page-login--layer" flex="dir:top main:justify cross:center box:justify">
      <!-- form -->
      <el-main class="page-login--form" flex="main:center cross:center">
        <el-card shadow="never">
          <el-form
           ref="loginForm"
           label-position="top"
           :rules="rules"
           :model="model"
           size="default"
           @keyup.enter.native="submitLogin()"
           >
            <el-form-item prop="username">
              <el-input type="text" v-model="model.username" placeholder="用户名">
                <i slot="prepend" class="fa fa-user-circle-o"></i>
              </el-input>
            </el-form-item>
            <el-form-item prop="password">
              <el-input type="password" v-model="model.password" placeholder="密码">
                <i slot="prepend" class="fa fa-keyboard-o"></i>
              </el-input>
            </el-form-item>
            <el-form-item prop="code">
              <el-input type="text" v-model="model.code" placeholder="验证码">
                <template slot="append">
                  <img class="login-code" src="./image/login-code.png">
                </template>
              </el-input>
            </el-form-item>
            <el-button size="default" @click="submitLogin" type="primary" class="button-login">
              登 录
            </el-button>
          </el-form>
        </el-card>
      </el-main>

      <div class="page-login--content-footer">
        <p class="page-login--content-footer-copyright">
          <span> nngrun.com </span>
          <d2-icon name="copyright"/>
          <span>2020</span><i> Edust System</i>
        </p>
        <p> All rights resvered </p>
      </div>
    </div>
  </div>
</template>

<script>
import dayjs from 'dayjs'
import util from '@/libs/util.js'
export default {
  data () {
    return {
      timeInterval: null,
      time: dayjs().format('HH:mm:ss'),
      // 表单
      model: {
        username: '',
        password: '',
        code: ''
      },
      // 表单校验
      rules: {
        username: [
          {
            required: true,
            message: '请输入用户名',
            trigger: 'blur'
          }
        ],
        password: [
          {
            required: true,
            message: '请输入密码',
            trigger: 'blur'
          }
        ],
        code: [
          {
            required: true,
            message: '请输入验证码',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  mounted () {
    this.timeInterval = setInterval(() => {
      this.refreshTime()
    }, 1000)
  },
  beforeDestroy () {
    clearInterval(this.timeInterval)
  },
  methods: {
    // ...mapActions('d2admin/account', [
    //   'login'
    // ]),
    refreshTime () {
      this.time = dayjs().format('HH:mm:ss')
    },
    /**
     * @description 提交表单
     */
    // 提交登录信息
    submitLogin () {
      this.$refs.loginForm.validate((valid) => {
        if (valid) {
          // 登录
          // 注意 这里的演示没有传验证码
          // 具体需要传递的数据请自行修改代码
          this.$store.dispatch('d2admin/account/login', {
            accountName: this.model.username,
            password: util.md5(this.model.password)
          })
            .then(() => {
              // 重定向对象不存在则返回顶层路径
              this.$router.replace('/index')
            })
        } else {
          // 登录表单校验失败
          this.$message.error('表单校验失败，请检查')
        }
      })
    }
  }
}
</script>

<style lang="scss">
  .page-login {

    @extend %unable-select;
    $backgroundColor: #F0F2F5;

    background-color: $backgroundColor;
    height: 100%;
    position: relative;

    // 层
    .page-login--layer {
      @extend %full;
      overflow: auto;

    }

    .page-login--layer-area {
      overflow: hidden;
      height: 100%;
      min-height: 500px;
    }

    // 时间
    .page-login--layer-time {
      font-size: 24em;
      font-weight: bold;
      color: rgba(0, 0, 0, 0.03);
      overflow: hidden;
      margin-top: 170px;
    }

    // 登录表单
    .page-login--form {

      width: 480px;

      // 卡片
      .el-card {
        background-color: rgba(255, 255, 255, 0.3);
        margin-top: 115px;
        margin-bottom: 15px;
      }

      // 登录按钮
      .button-login {
        width: 100%;
      }

      .login-code {
        height: 40px - 2px;
        display: block;
        margin: 0px -20px;
        border-top-right-radius: 2px;
        border-bottom-right-radius: 2px;
      }

      .page-login--quick {
        width: 100%;
      }
    }

    // footer
    .page-login--content-footer {

      padding: 0;
      margin: 0;
      font-size: 12px;
      line-height: 12px;
      text-align: center;
      color: $color-text-normal;

      .page-login--content-footer-copyright {
        margin-bottom: 10px;

        a {
          color: $color-text-normal;
        }
      }
    }

    .el-button {
      border-color: #a5beff;
      background-color: rgba(10, 100, 240, 0.3);
    }

  }
</style>
